let obj = {};
setPage();
// 点击事件
$('.jdspdetails').click(function(e) {
        if (e.target.getAttribute('name') === '-') {
            // 如果点击的是 - 减号
            // 给 标签 value属性赋值 当前数值-1

            // 获取当前标签中存储的数值
            let num = $('.num').val() - 0;

            // 最小是 1 
            $('.num').val(num === 1 ? 1 : num - 1);


        } else if (e.target.getAttribute('name') === '+') {
            // 如果点击的是 + 减号
            // 给 标签 value属性赋值 当前数值+1
            // 获取当前标签中存储的数值
            let num = $('.num').val() - 0;

            // 最大是库存
            $('.num').val(num === obj.goods_number - 0 ? obj.goods_number : num + 1);


        } else if (e.target.getAttribute('name') === 'inCart') {
            // 点击的是 加入购物车 

            // 判断有没有登录
            const cookieObj = myGetCookie();

            // 如果没有登录 跳转登录页面
            if (cookieObj.login === undefined) {
                if (window.confirm('您还没有登录,点击确定,跳转登录页面')) {
                    window.location.href = './login.html';
                }

                // 已经登录 将 商品信息加入购物车 之后 跳转购物车页面
            } else {
                // 判断 有没有 创建 购物车

                // 还没有创建购物车 
                if (localStorage.cart === undefined) {
                    // 当前商品信息存储在 变量obj中
                    // 添加两个属性 buy num 
                    // buy  当前商品的购买状态 true 表示购买 false 表示不购买
                    // num  当期商品的购买数量 最小是1 最大是库存值

                    // 当前商品添加购买状态属性 默认是购买
                    obj.buy = true;

                    // 当前商品添加购买数量 范围是 1 - 库存
                    // 获取input标签当前数据
                    let number = $('.num').val() - 0;
                    if (number >= 1 && number <= obj.goods_number - 0) {
                        // 在正常值范围内 添加 num属性 属性值是购买数量
                        obj.num = number;

                    } else {
                        // 购买数量超出范围 弹出提示信息
                        window.alert(`您输入的购买数量有误,请输入 1 至 ${obj.goods_number} 之间的数值 `);
                        // 终止之后程序的执行
                        return;
                    }

                    // 将 对象 转化为 json字符串 存储到 localStorage中
                    // 当前商品信息是 存储在 数组中
                    localStorage.cart = JSON.stringify([obj]);

                    // 购物车已经创建了
                } else {
                    // 获取 localStorage 中的数据 还原为数组形式
                    const arr = JSON.parse(localStorage.cart);

                    // 判断 是不是 空车 也就是 是不是 空数组
                    // length 是 0 的数组 是 空数组
                    if (arr.length === 0) {
                        // 如果是 空数组 

                        // 给当前商品添加数据信息 写入数据

                        // 当前商品添加购买状态属性 默认是购买
                        obj.buy = true;

                        // 当前商品添加购买数量 范围是 1 - 库存
                        // 获取input标签当前数据
                        let number = $('.num').val() - 0;
                        if (number >= 1 && number <= obj.goods_number - 0) {
                            // 在正常值范围内 添加 num属性 属性值是购买数量
                            obj.num = number;

                        } else {
                            // 购买数量超出范围 弹出提示信息
                            window.alert(`您输入的购买数量有误,请输入 1 至 ${obj.goods_number} 之间的数值 `);
                            // 终止之后程序的执行
                            return;
                        }

                        // 将 对象 转化为 json字符串 存储到 localStorage中
                        // 当前商品信息是 存储在 数组中
                        localStorage.cart = JSON.stringify([obj]);

                        // 不是 空数组 
                    } else {
                        // 判断 当前商品 在不在车上 
                        // 使用 函数 数组.some() 对 数组中存储商品的goods_id 和 当前商品的goods_id做比较判断
                        let bool = arr.some(function(item) {
                            return item.goods_id === obj.goods_id;
                        })

                        // 根据bool的结果判断 
                        // bool 存储 true 商品存在 bool 存储 false 商品不存在
                        if (bool) {
                            // 循环遍历数组 判断 数组商品goods_id 和 当前商品goods_id相同
                            for (let i = 0; i <= arr.length - 1; i++) {
                                // i 是 索引下标 arr[i] 是 商品对象
                                if (arr[i].goods_id === obj.goods_id) {
                                    // 获取 输入的数据
                                    let number = $('.num').val() - 0;

                                    // 计算 累加购买数量 必须在 1 - 库存范围内
                                    if (arr[i].num + number >= 1 && arr[i].num + number <= arr[i].goods_number - 0) {
                                        // 符合范围 修改 购买数量为累加的购买数量
                                        arr[i].num = arr[i].num + number;
                                    } else {
                                        // 弹出提示信息
                                        window.alert(`您购买的数量超出范围,您最多还能购买${ arr[i].goods_number-0 - arr[i].num }`);
                                        // 终止之后程序的执行
                                        return;
                                    }
                                }
                            }
                            // 将 新数组 写入到 localStorage 中
                            localStorage.cart = JSON.stringify(arr);

                        } else {
                            // 商品不存在 新增商品单元到数组的起始位置 将新数组写入 localStorage

                            // 当前商品添加购买状态属性 默认是购买
                            obj.buy = true;
                            // 当前商品添加购买数量 范围是 1 - 库存
                            // 获取input标签当前数据
                            let number = $('.num').val() - 0;
                            if (number >= 1 && number <= obj.goods_number - 0) {
                                // 在正常值范围内 添加 num属性 属性值是购买数量
                                obj.num = number;
                            } else {
                                // 购买数量超出范围 弹出提示信息
                                window.alert(`您输入的购买数量有误,请输入 1 至 ${obj.goods_number} 之间的数值 `);
                                // 终止之后程序的执行
                                return;
                            }
                            arr.unshift(obj);
                            localStorage.cart = JSON.stringify(arr);
                        }
                    }
                }
                // 跳转购物车页面
                window.location.href = './shopping.html';
            }
        }
    })
    // 定义函数 动态渲染生成页面
async function setPage() {
    const valObj = myGetUrlValue();
    const res = await myPromiseAjax('../server/goods_detail.php', 'post', { goods_id: valObj.goods_id }, 'json');
    console.log(res);
    console.log(111);
    obj = res;
    let str = `
    <!-- 左侧图片栏 -->
        <div class="detailsimg">
            <img src="${res.goods_big_logo}" alt="" id="detimg">
        </div>
        <!-- 右侧介绍栏 -->
        <div class="rigintr">
            <!-- 商品介绍 -->
            <p id="introduction">${res.goods_name}</p>
            <!-- 商品详情 -->
            <div id="riglan">
                <!-- 顶部装饰栏 -->
                <div id="zhuangshi"></div>
                <!-- 商品价格优惠栏 -->
                <div id="jdbenefit">
                    <p id="jdjg">&nbsp;&nbsp;京&nbsp;&nbsp;东&nbsp;&nbsp;价<span id="jiage">￥${res.goods_price}</span><a href="javascript:;" id="tongjd">降价通知</a></p>
                    <p id="jdyh">
                        &nbsp;&nbsp;优&nbsp;&nbsp;惠&nbsp;&nbsp;劵 <span id="jdspan">满50减10</span><span id="jdspan">满300减30</span><span id="jdspan">满400减50</span>
                    </p>
                </div>
                <!-- 累计评价 -->
                <div class="evaluation">
                    <span id="evaspan">累计评价<br><i id="qiqian">7000+</i></span>
                </div>
            </div>
            <!-- 配送地址栏 -->
            <div class="distribution">
                <p id="distword">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;配&nbsp;&nbsp;送&nbsp;&nbsp;至:</p>
                <select id="distriaddress">
                 <option>北京市昌平区沙阳镇沙阳路18号北京科技职业技术学院</option>
                 <option>上海市静安区宏信镇四川中路1号</option>
                 <option>广州市黄浦区凌鑫村建安路35号</option>
                 <option>深圳市滨海区萨达镇北京路45号</option>
                 <option>成都市龙柑区成华大道二仙桥3号</option>
                </select> 
            </div>
             <!-- 添加数量加入购物车栏 -->
             <div class="decrease">
             <input value="1" class="num">
             <button name="-" type="button" class="jdbtnone">-</button>
             <button name="+" type="button" class="jdbtntwo">+</button>
            </div>
            <div class="jdspfopls">
                <div class="fotbrn1"><a href="JavaScript:;" id="fotbtn1" name="inCart" role="button">加入购物车</a></div>
                <div class="fotbrn2"><a href="javascript:;"id="fotbtn2">立即购买</a></div>
            </div>
        </div>
        <!-- 右侧广告区 -->
        <img src="../imges3/0cac53c1b82e1b05.gif" alt="" id="guangyou">
        <div class="jdcode13">
            <p id="codeword">使用京东APP <br>随时随地看商品</p>
            <img src="../imges3/codejd.png" alt="" id="codema">
        </div>
        <div class="bigbigimg">
          ${res.goods_introduce}
        </div>
    `;
    $('.jdspdetails').html(str);

}